<template>
  <div style="width: 100%;padding: 10px">
<!--    <Distpicker v-show="false"  @selected="onSelected" :province="district.province" :city="district.city"
                :area="district.area"></Distpicker>-->
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">装车单信息</span>
          </div>

          <div style="display: flex">
            <el-button type="warning" v-if="form.status==1" @click="writeoff" style="margin-left:20px">一键核销</el-button>

            <el-button type="primary" v-permission="['picking.edit']" v-show="form.status === 0" size="small" @click="editClick">修改</el-button>
            <el-button type="primary"
            size="small"
                       :loading="auditClicked"
                       v-show="form.status === 0" v-permission="['picking.audit']"
                       @click="auditClick">出库
            </el-button>
            <el-button type="primary" size="small"
                       :loading="auditClicked"
                       v-show="form.status === 1" v-permission="['picking.unAudit']"
                       @click="unAuditClick">取消出库
            </el-button>
            <el-button type="danger" size="small" v-show="form.status==0" v-permission="['picking.unAudit']" :loading="cancelClicked" @click="cancelClick">作废
            </el-button>
            <el-button type="danger" v-show=" form.status == 3" style="margin-left: 10px" v-permission="['picking.del']"
                       :loading="delClicked" size="small"   @click="delClick">删除订单
            </el-button>
            <!-- <el-dropdown style="margin-left: 10px" split-button type="primary" v-permission="['picking.print']" v-show="form.status != 0&&form.status != 3 " @click="printClick" @command="handleCommand">
              打印
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="printSetupClick">模版设置</el-dropdown-item>
                  <el-dropdown-item command="exportViewClick">导出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
             <el-button type="primary" style="margin-left: 10px" size="small" v-permission="['picking.print']"
                        @click="printClick">打印
            </el-button>
             <ExportList2Excel  ref="exportList2Excel" @handleExport="handleExport"  name="导出" />

          </div>
        </div>
        <div class="deleted_OrderHeader" style="border-left: none;">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">装车单号：</span>
              <span class="deleted_OrderTitle">{{form.sn}}</span>
            </el-col>
            <el-col :span="8">
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">单据状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.status | watchPickingStatus}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">装车日期：</span>
              <span class="deleted_OrderTitle">{{form.orderDate | dateFormatter}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent"  style="padding-top: 5px;">
            <el-col :span="8">
              <span class="deleted_Row_Headings">送货司机：</span>
              <span class="deleted_OrderTitle">{{form.employeeName}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">装车仓库：</span>
              <span class="deleted_OrderTitle">{{form.shopName}}</span>
            </el-col>
          </el-row>
        </div>
      <div>
   </div>
   <div style="margin-top:20px">
   <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="装车单" name="first">
      <div class="app"  v-if="scopeType==3" >
        <div class="deliveryboy">
          <span >总计:</span>
        </div>
        <div class="content">
          <!--<div class="content_one">-->
            <!--<span>收款金额：{{ delivery(deliveryForm.paymentAmt)}}</span>-->
            <!--<span>退款金额：{{ delivery(deliveryForm.refundsAmt)}}</span>-->
          <!--</div>-->
          <div class="content_one">
            <span>退桶数:{{deliveryForm.returnQry}}</span>
            <span>压桶数:{{deliveryForm.plegeQry}}</span>
          </div>
          <div class="content_one">
            <span>压桶金额:{{delivery(deliveryForm.plegeAmt)}}</span>
            <span>退桶金额:{{delivery(deliveryForm.returnAmt)}}</span>
          </div>
          <div class="content_one">
            <span>客户欠桶:{{deliveryForm.oweQry}}</span>
            <span>客户存桶:{{deliveryForm.storeQry}}</span>
          </div>
          <div class="content_one">
            <span>送货数量:{{deliveryForm.outQry?deliveryForm.outQry:0}}</span>
            <span>回桶数量:{{deliveryForm.bckQry}}</span>
          </div>
        </div>
        <div class="summary">
          <div style="display:flex;padding-left:20px">
            <div style="margin-right:10px">
              <span >实收金额:</span>
              <span  style="color:red">{{delivery(deliveryForm.effectiveAmt)}}</span>
            </div>
            <div>
              <span >实收水票:</span>
              <span style="color:red">{{delivery(deliveryForm.paymentQry)}}</span>
            </div>
          </div>
          <!--<div style="display:flex;padding-left:20px;align-items: center;">-->
            <!--<div v-if="form.status==1">-->
              <!--<span>实际回桶:</span>-->
              <!--<el-input type="number" v-model="actualReturnBarrel" style="width: 100px;padding-left: 5px" placeholder="请输入回桶"></el-input>-->
            <!--</div>-->
            <!--<div>-->
              <!--<span>实际回桶:</span>-->
              <!--<span style="color:red">{{form.actualReturnBarrel}}</span>-->
            <!--</div>-->
          <!--</div>-->
        </div>
      </div>
         <el-table
          :data="itemForm"
          border
          show-summary
          stripe
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            align="center"
            header-align="center"
            fixed
          >
          </el-table-column>

          <el-table-column
            label="商品编号"
            width="120"
            align="center"
            header-align="center"
          >
          <template slot-scope="{row}">
            <span>{{row.productId}}</span>
          </template>
          </el-table-column>
           <el-table-column
             label="商品名">
             <template slot-scope="{row}">
               <span>{{row.name}}</span>
             </template>
           </el-table-column>
           <el-table-column
             label="规格"
             align="center"
           >
             <template slot-scope="{row}">
               <span>{{row.spec}}</span>
             </template>
           </el-table-column>
           <el-table-column
             label="货号/条码"
             width="170"
           >
             <template slot-scope="{row}">
               <span>{{row.sn}}</span>
             </template>
           </el-table-column>
           <el-table-column
             label="单位"
             width="50"
             align="center"
           >
             <template slot-scope="{row}">
               <span>{{row.unit}}</span>
             </template>
           </el-table-column>
          <el-table-column
            label="装车数"
            width="120"
            align="right"
            header-align="center"
            prop="quantity"
          >
          </el-table-column>
          <el-table-column
            label="送货数"
            width="120"
            align="right"
            header-align="center"
            prop="shippingQuantity"
          >
          </el-table-column>
           <el-table-column
             label="剩余数"
             width="120"
             align="right"
             header-align="center"
             prop="surplus"
           >
           </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="送货单" name="second" :style="{height:(curHeight-100)+'px'}">
        <div class="details_card" v-loadMore="[payLoads,'shipping-list']" :style="{height:(tabsHeight-100)+'px'}"  >
            <shippingList :shippingForm="shippingForm" ordertype="shipping" @detailsClick="detailsClickone" abnormalshow='true'></shippingList>
          </div>
        <el-footer class="el-footerBox" style="margin-bottom: auto">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="shippingloadOrder"></pagination>
    </el-footer>
    </el-tab-pane>
  </el-tabs>
    </div>
      </div>
    </el-card>
    <el-dialog
      title="打印安装教程"
      :visible.sync="isNoInstall"
      width="600px"
      v-el-drag-dialog
      append-to-body
      :before-close="installClose">
      <div style="position: relative;height: 30vh;overflow: auto">
        <div>
          <span style="font-weight: bold">未检测到您的打印控件，请检查是否安装以下两个打印控件</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">1、install_lodop64.exe（或者32位，根据自己的电脑位数）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">2、CLodopPrint_Setup_for_Win32NT.exe（32位64位皆可用）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">3、苹果系统暂时无法支持</span>
          <span style="font-weight: bold">已经下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果已有两个软件，请检查是否已经打开服务。</span>
          <span style="font-weight: bold">未下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果没有两个控件的客户，您可以点击下面的下载地址自行前往下载<a style="color: #00B6FB;margin-left: 20px" target="view_window" href="http://www.c-lodop.com/download.html">下载地址</a></span>
          <span style="display: block;margin-left: 20px;line-height: 20px">(提示：请下载Lodop发型包Windows版，里面包含所需的两个控件，安装完后请刷新本页面方可使用打印，install_lodop64.exe软件下载完打开即可，
                CLodopPrint_Setup_for_Win32NT.exe需要安装，您可以直接选择开机自动启动)</span>
        </div>
      </div>
    </el-dialog>
<!--    <orderPrint @isTeach="isTeach" v-if="isPrintShow==true" :form="form" :title="title" style="display: none" :sendForm="sendForm"-->
<!--                :memoName="memoName"   :signName="signName" ref="orderPrint"></orderPrint>-->
    <orderPrintTwo @isTeach="isTeach" v-if="isPrintShow==true" :form="form" printName="purchase_10200_0" :shopName="officeName" :sendForm="sendForm" :officeName="officeName" ref="orderPrintTwo"></orderPrintTwo>
  </div>
</template>

<script>
  import ExportList2Excel from "@/components/ExportList2Excel";
  import Pagination from '@/components/Pagination'
  import loadMore from '@/utils/more.js'
  import orderPrint from '@/components/OrderPrint/orderPrint'
  import orderPrintTwo from '@/components/OrderPrint/orderPrintTwo'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {EventBus} from '@/api/eventBus'
  import {update, find, audit,unAudit, cancel, del, exportView, print, exportPicking} from '@/api/picking'
  import {list} from '@/api/pickingItem'
  import utils from '../../utils/utils.js'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import { mapGetters } from 'vuex';
  import shippingList from '../shipping/components/list'
  import printJs from 'print-js';
  import { list as shipplist} from '@/api/shipping'
  import { summary,completeBatch } from '@/api/shippingSettle'
  import { complete } from '@/api/picking'
  export default {
    name: 'picking-view',
    directives: {elDragDialog, permission,loadMore},
    data() {
      return {
        activeName: 'first',
        form: {},
        itemForm : [],
        clicked: false,
        isPrintShow:false,
        delClicked:false,
        closeClicked: false,
        isNoInstall:false,
        picking_id:'',
        actualReturnBarrel: '',
        orderLog:[],
        areaName:'',
        employeeName:'',
        officeName:'',
        sendForm:{},
        operatorName:'',
        pdfUrl:'',
        times:null,
        auditClicked:false,
        cancelClicked:false,
        payLoads:'',
        shippingForm:[],
        shippingStatus:'',
             keyword: {
          date: [],
          orderSn: '',
          memberId: '',
          phone: '',
          productId: ''
        },
        tabsHeight:null,
        curHeight:null,
        deliveryForm:{},
        total:0,
        pageNum:1,
        pageSize:20,
        shopName:''

      }
    },
    watch:{ // 只要路由发生变化就重新获取数据
      $route (newVal, oldVal) {
        if (newVal.name=='picking-view' && newVal.query.id!=this.form.id) {
          this.form.id = newVal.query.id;
          this.findClick()
          this.loadItem();
          this.shippingloadOrder();
          this.obtainshippingList();
        }
      }
    },
    components:{Distpicker,orderPrintTwo,shippingList,Pagination,ExportList2Excel},
    computed: {
      ...mapGetters([
        'token',
          'scopeType'
      ])
    },
    filters: {
      watchIsExit(val){
        if (val==''){
          return '无'
        }else{
          return  val
        }
      },
      watchPickingStatus(val){
        if (val == 0) {
          return '未审核'
        } else if (val == 1) {
          return '已审核'
        } else if (val == 2) {
          return '已完成'
        } else if (val == 3) {
          return '已取消'
        }
      },
      watchPickingType(val){
        if (val == 0) {
          return '装车单'
        }
      }
    },
    created() {
      var _this = this;
      _this.form.id = this.$route.query.id;
      _this.findClick();
      _this.loadItem();
      EventBus.$on('picking-view', res => { // 监听新增完毕
        // 更新列表数组
        _this.form.id = res.id;
        _this.findClick()
      })
      EventBus.$on('picking-edit', res => { // 监听新增完毕
        // 更新列表数组
        _this.form.id = res.id;
        _this.findClick()
      })
        _this.shippingloadOrder(),
        _this.obtainshippingList()
      console.log(this.scopeType)
    },
    activated() {
      this.payLoads = new Date().getTime()
    },
    mounted(){
            this.comeIn()
      this.beforeMount()
    },
    methods: {
    watchPickingStatus(val){
        if (val == 0) {
          return '未审核'
        } else if (val == 1) {
          return '已审核'
        } else if (val == 2) {
          return '已完成'
        } else if (val == 3) {
          return '已取消'
        }
      },
      handleExport() {
        let _this= this
         var  loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data ={}
        data.tHeader = ["装车单号","装车仓库","送货员","备注","订单日期","订单号","收货人",'收货人电话',"收货人地址","商品名称","规格","单位","商品数量","商品单价","优惠","结算运费","商品金额"]
        data.filterVal = ["sn","shopName","employeeName","memo","orderDate","orderSn","consignee","phone","address","name","spec",'unit',"quantity","price","discount","shippingFreight",'amount']
        data.filename = "装车单列表";
        let params = new URLSearchParams()
        params.append('pickingId',   _this.form.id)
        exportPicking(params).then(res=>{
          let newarray=[]
          newarray=res.data
          delete newarray.picking.orderDate
          var pickingarray=[]
          let pickingarrayitemlist={
            orderDate:"",
            orderSn:"",
            consignee:"",
            address:"",
            subQuantity:"",
            subPrice:"",
            phone:""
          }
          newarray.shippingList.forEach(item=>{
                 pickingarrayitemlist.orderDate=utils.dateFormatter(item.orderDate)
                 pickingarrayitemlist.orderSn=item.orderSn
                 pickingarrayitemlist.consignee=item.consignee
                 pickingarrayitemlist.address=item.address
                 pickingarrayitemlist.subQuantity=item.subQuantity
                 pickingarrayitemlist.subPrice=item.subPrice
                 pickingarrayitemlist.phone=item.phone
                item.itemList.forEach(val=>{
                 let pickingobject={};
                 pickingobject={ ...pickingarrayitemlist,...val}
                 pickingobject={ ...pickingobject,...newarray.picking}
                 pickingarray.push(pickingobject)
                // console.log(pickingobject);
                })
          })
          data.list=pickingarray
          console.log(data.list);
          _this.$refs.exportList2Excel.handleDownload(data);
            loading.close();
        }).catch(error => {
          _this.$refs.exportList2Excel.unlockLoading()
             loading.close();
        })
      },

      writeoff(){
        var _this=this
        if (this.deliveryForm==null) {
          return;
        }
        let params = new URLSearchParams()
        params.append('actualReturnBarrel',_this.actualReturnBarrel)
        // params.append('pickingId',   _this.form.id)
        complete(_this.form.id,params).then(res=> {
          console.log(res, '核销')
          if (res.type == 'success') {
            this.$message('核销成功');
            this.findClick()
          } else {
            this.$message.error('核销失败');
          }
        })
      },

      obtainshippingList(){
        var  _this=this
        let params = new URLSearchParams()
        params.append('pickingId',   _this.form.id)
        summary(params).then(res=>{
          if(res.data[0] != null){
            this.deliveryForm=res.data[0]
          }
          console.log(res,'详情deliveryForm');
        })
      },

     delivery(val){
        if(utils.isNull(val)){
          return '0.00'
        }else{
          return val.toFixed(2)
        }
      },
      handleClick(){},
       detailsClickone(data){
        this.$router.push({
          path: '/shipping/view', query: { id: data }
        })
      },
      shippingloadOrder() {
        var _this = this
        let params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('pickingId',   _this.form.id)
        shipplist(params).then(response => {
          console.log(response)
		      console.log('送货单')
          _this.shippingForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        })
      },
       beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 311//减去页面上固定高度height
              _this.tabsHeight = h - 381
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 224//减去页面上固定高度height
              this.tabsHeight = h - 294
            }
          })()
        }
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224//减去页面上固定高度height
        this.tabsHeight = h - 294
      },
      findClick() {
        var _this = this;//debugger
        find(this.form.id).then(response => {
          _this.form = response.data.picking;
          // _this.employeeName=response.data.employeeName
          _this.operatorName = response.data.operatorName;
          //_this.shopName = response.data.shopName;


        }).catch(error => {
        })
      },
      loadItem() {
        var _this = this;//debugger
        let params = new URLSearchParams()
        params.append('pageNum', 0)
        params.append('pageSize', 0)
        params.append('pickingId', this.form.id)
        list(params).then(response => {
          _this.itemForm = response.data.data
          this.$set(_this.itemForm,'surplus','')
          _this.itemForm.forEach(item=>{
            item.surplus=Number(item.quantity)-Number(item.shippingQuantity)
          })
        }).catch(error => {
          console.log('error!!')
        })
      },
      installClose(){
        this.isNoInstall=false
      },
      editClick() {
        this.$router.push({
          path: '/picking/edit', query: {id: this.form.id}
        })
      },
      cancelClick() {
        var _this = this
        this.$confirm('是否取消装车单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.cancelClicked = true
          cancel(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            _this.cancelClicked = false
            this.findClick()
            EventBus.$emit('picking-view', response.data)
          }).catch(error => {
            _this.cancelClicked = false
          })
        })
      },
      auditClick() {
        var _this = this;
        this.$confirm('是否审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.auditClicked = true
          audit(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            _this.auditClicked = false
            this.findClick();
            EventBus.$emit('picking-view', response.data)
          }).catch(error => {
            _this.auditClicked = false
          })
        })
      },
      unAuditClick() {
        var _this = this;
        this.$confirm('是否弃审?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.auditClicked = true
          unAudit(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            _this.auditClicked = false
            this.findClick();
            EventBus.$emit('picking-view', response.data)
          }).catch(error => {
            _this.auditClicked = false
          })
        })
      },

      detailsClick(id){
          alert("success" + id);
      },
      delClick() {
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.delClicked = true
          del(_this.form.id).then(response => {
            _this.delClicked = false
            EventBus.$emit('picking-delete', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
              _this.$router.push({
                path: '/picking/list'
              })
            })// 关闭当前tab回到列表
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            _this.delClicked = false
            console.log('error!!')
          });
        }).catch(() => {
        });
      },
      isTeach(data){
        this.isNoInstall=data
      },
      printClick(){
       let params = new URLSearchParams()
        params.append('pickingId', this.form.id)
        print(params).then(res=>{})
        // this.isPrintShow=true
        // setTimeout(()=>{
        //   this.$refs.orderPrintTwo.printPdf()
        // },1000)
        // this.pdfUrl=process.env.VUE_APP_BASE_API + '/admin/picking/print/'+this.form.id+'?token='+this.token
        // window.open(this.pdfUrl);
      },
      printSetupClick(){
        this.isPrintShow=true
        setTimeout(()=>{
          this.$refs.orderPrintTwo.printSetUp()
        },1000)
      },
      exportViewClick(){
        this.exportView=process.env.VUE_APP_BASE_API + '/admin/purchase/export/'+this.form.id+'?token='+this.token
        window.open(this.exportView)
      },
      clickedClick(){
        this.clicked= false
      },
      handleCommand(command){
        if (command == 'printSetupClick'){
          this.printSetupClick()
        }else {
          this.exportViewClick()
        }
      }
    }
  }
</script>

<style scoped>
.app{
  height: 80px;
  width: 100%;
  display: flex;
  background-color: rgb(233 ,235,236);
  margin-top: 20px;
}
.deliveryboy{
  height: 100%;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: rgb(245,247,250) 1px solid;
}
.content{
  height: 100%;
  width: 700px;
  display: flex;
  justify-content: space-around;

}
.content_one{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.summary{
   height: 100%;
   paddding-top:40px;
   paddding-left:40px;
   display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 20px;
    border-left: rgb(245,247,250) 1px solid;
}
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
  }

  .deleted_OrderContent {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
  }
  .details_Title {
    font-size: 14px;
    color: #409EFF;
  }
    .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }

</style>
